<template>
  <dv-border-box-8>
    <dv-decoration-7 style="width:100%;height:30px;">销售计划</dv-decoration-7>
    <div id="SalePlan" style="width: 100%;height: 270px"></div>
  </dv-border-box-8>

</template>

<script>
import {getSaleAchieveRate} from "@/api/dv/carbon";

export default {
  name: "SalePlan",
  mounted(){
    this.initEchart();
  },
  methods:{
    getData() {
      return new Promise((resolve, reject) => {
        getSaleAchieveRate().then(response => {
          resolve(response.data)
        });
      })
    },
    initEchart(){
      let data = this.getData()
      data.then(res => {
        let sold = res.barData
        let planSale = res.lineData
        let rate = res.rateData
        let date = res.category
        let myChart = this.$echarts.init(document.getElementById('SalePlan'),'dark');

        let option = {
          backgroundColor: '',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#fff'
              }
            }
          },
          legend: {
            data: ['已销售', '计划销售','完成率']
          },
          xAxis: [
            {
              type: 'category',
              data: date,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '销售数量',
              axisLabel: {
                formatter: '{value}万'
              }
            },
            {
              type: 'value',
              name: '完成率',
              min: 0,
              max: 100,
              interval: 20,
              axisLabel: {
                formatter: '{value} %'
              }
            }
          ],
          series: [
            {
              name: '已销售',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              data: sold
            },
            {
              name: '计划销售',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              data: planSale
            },
            {
              name: '完成率',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' %';
                }
              },
              data: rate
            }
          ]
        };

        option && myChart.setOption(option);
      })




    }
  }
}
</script>

<style scoped>

</style>
